<template>
  <view :class="['container', { dark: theme == 'dark' }]">
    <view class="userinfo-card">
      <view class="card-box">
        <view class="balance-card-wrap">
          <view class="balance-card">
            <view class="tit">BISHANGWANG</view>
            <view class="xia">
              <view class="num">
                <text style="font-size: 40upx">{{ $t('bico.W125') }}</text>
              </view>
            </view>
            <view class="tit">{{ $t('bico.W126') }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="u-content plr20 ptb10">
      <view :class="['vh90', 'funs', { darksss: theme == 'dark' }]">
        <u-field
          v-model="coinApply.currencyZhName"
          :label="$t('bico.W132')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.currencyEnName"
          :label="$t('bico.W133')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.currencyAbbrName"
          :label="$t('bico.W134')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.marketFloat"
          :label="$t('bico.W135')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.officialHoldings"
          :label="$t('bico.W136')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.officialAddress"
          :label="$t('bico.W137')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.blockBrowser"
          :label="$t('bico.W138')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.movementArea"
          :label="$t('bico.W139')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.whitePaperAddress"
          :label="$t('bico.W140')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.listedExchange"
          :label="$t('bico.W141')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.projectAreas"
          :label="$t('bico.W142')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.functionalInterpretation"
          :label="$t('bico.W143')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.projectAddress"
          :label="$t('bico.W144')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-model="coinApply.addressWay"
          :label="$t('bico.W145')"
          required
          :error-message="errorMessage"
        >
        </u-field>

        <u-field
          v-if="!smsSendBoolean && !emailSendBoolean"
          v-model="code"
          :label="$t('bico.W146')"
          :placeholder="$t('bico.W147')"
        >
          <u-button
            size="mini"
            slot="right"
            type="success"
            @click="getCode"
            >{{ codeText }}</u-button
          >
        </u-field>

        <u-verification-code
          :start-text="$t('login.get_code')"
          :change-text="'XS' + $t('login.resend')"
          :end-text="$t('login.resend')"
          ref="uCode"
          @change="codeChange"
        ></u-verification-code>
      </view>
      <view class="">
        <view
          class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto"
          @click="submit"
          >{{ $t('login.e_confrim') }}</view
        >
      </view>
      <u-gap
        height="80"
        bg-color=""
      ></u-gap>
      <u-gap
        height="80"
        bg-color=""
      ></u-gap>
      <u-gap
        height="80"
        bg-color=""
      ></u-gap>
    </view>
  </view>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import {
  addCoinApply,
  getMsg,
  commonCheckSmsSend,
  commonCheckEmailSend
} from '../../common/apiString.js';
import { myMixins } from '@/common/myMixins.js'; //加入全局下拉刷新
export default {
  mixins: [myMixins],
  data() {
    return {
      mobile: '',
      coinApply: {
        currencyZhName: '',
        currencyEnName: '',
        currencyAbbrName: '',
        marketFloat: '',
        officialHoldings: '',
        officialAddress: '',
        blockBrowser: '',
        movementArea: '',
        whitePaperAddress: '',
        listedExchange: '',
        projectAreas: '',
        functionalInterpretation: '',
        projectAddress: '',
        addressWay: '',
        del: 'N'
      },
      smsSendBoolean: true,
      emailSendBoolean: true,
      errorMessage: '',
      code: '',
      codeText: ''
    };
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('bico.W127')
    });
    this.getSmsSend();
    this.getEmailSend();
    this.$utils.setTheme(this.theme);
  },
  methods: {
    getSmsSend() {
      this.$utils.initData({ url: commonCheckSmsSend, type: 'post' }, (res, msg) => {
        this.smsSendBoolean = res == 'N';
      });
    },
    getEmailSend() {
      this.$utils.initData({ url: commonCheckEmailSend, type: 'post' }, (res, msg) => {
        this.emailSendBoolean = res == 'N';
      });
    },
    codeChange(text) {
      //text.replace("重新获取","send")
      this.codeText = text;
    },
    getCode() {
      if (!this.checkData()) {
        return;
      }
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: this.$t('bico.W128')
        });
        this.$utils.initDataToken(
          {
            url: getMsg,
            data: {
              account: ''
            },
            type: 'post'
          },
          (res, msg) => {
            uni.hideLoading();
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }
        );
      } else {
        this.$u.toast(this.$t('bico.W129'));
      }
    },
    submit() {
      var that = this;
      if (that.checkData()) {
        uni.showLoading({
          title: this.$t('bico.W130')
        });
        that.coinApply.code = that.code;
        this.$utils.initDataToken(
          {
            url: addCoinApply,
            data: that.coinApply,
            type: 'post'
          },
          (res, msg) => {
            uni.hideLoading();
            this.$u.toast(this.$t('bico.W131'));
          }
        );
      }
    },
    checkData(data) {
      var that = this;

      if (that.$utils.isEmpty(that.coinApply.currencyZhName)) {
        this.$u.toast(this.$t('bico.W148'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.currencyEnName)) {
        this.$u.toast(this.$t('bico.W149'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.currencyAbbrName)) {
        this.$u.toast(this.$t('bico.W150'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.marketFloat)) {
        this.$u.toast(this.$t('bico.W151'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.officialAddress)) {
        this.$u.toast(this.$t('bico.W152'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.officialHoldings)) {
        this.$u.toast(this.$t('bico.W153'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.blockBrowser)) {
        this.$u.toast(this.$t('bico.W154'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.movementArea)) {
        this.$u.toast(this.$t('bico.W155'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.whitePaperAddress)) {
        this.$u.toast(this.$t('bico.W156'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.listedExchange)) {
        this.$u.toast(this.$t('bico.W157'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.projectAreas)) {
        this.$u.toast(this.$t('bico.W158'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.functionalInterpretation)) {
        this.$u.toast(this.$t('bico.W159'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.projectAddress)) {
        this.$u.toast(this.$t('bico.W160'));
        return false;
      }
      if (that.$utils.isEmpty(that.coinApply.addressWay)) {
        this.$u.toast(this.$t('bico.W161'));
        return false;
      }
      return true;
    }
  }
};
</script>

<style lang="scss">
page {
  background: #f7f7f7;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.avatar {
  background: #ffffff0a;
  border-radius: 50%;
  width: 16vw;
  height: 16vw;
  overflow: hidden;
  border: 1vw solid #ffffff14;
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.container {
  .userinfo-card {
    .card-box {
      width: 100%;
      height: 120px;
      position: relative;
      z-index: 0;

      .user-section {
        position: absolute;
        top: 0;
        z-index: 10;
        width: 100%;
        padding: 50upx 30upx 210upx;
        display: flex;

        .avatar-wrap {
          width: 100upx;
          height: 100upx;
          border-radius: 50%;
          overflow: hidden;
          position: relative;
          top: 1.2vw;

          .avatar {
            width: 100%;
            height: 100%;
          }
        }

        .portrait-box {
          margin-left: 18upx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .info-box {
            font-size: 38upx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333;
          }

          .tuan {
            display: flex;
            align-items: center;

            .ma {
              font-size: 3.6vw;
              font-family: PingFang SC;
              font-weight: 600;
            }

            .fuzi {
              width: 64upx;
              height: 34upx;
              background: #cccccc;
              border-radius: 15upx;
              font-size: 20upx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333;
              text-align: center;
              line-height: 34upx;
              margin-left: 10upx;
            }
          }
        }
      }

      .balance-card-wrap {
        width: 100%;
        height: 200upx;
        padding: 0 20upx;
        position: absolute;
        bottom: 0;
        z-index: 10;

        .balance-card {
          width: 100%;
          height: 200upx;
          background-image: url(../../static/image/sbsqbg.png);
          background-position: 0% 0%;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          border-radius: 4px;
          padding: 30upx;

          .tit {
            font-size: 3.6vw;
            font-family: PingFang SC;
            font-weight: bold;
            color: #fff;
          }

          .xia {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .num {
              font-size: 70upx;
              font-family: DINPro;
              font-weight: bold;
              color: #fff;
            }

            .withdraw-btn {
              width: 150upx;
              height: 60upx;
              line-height: 60upx;
              text-align: center;
              background: #d8bd6c;
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #fff;
              border-radius: 10upx;
            }
          }
        }
      }
    }
  }

  .main {
    padding: 20upx;

    .income-card {
      width: 100%;
      background-color: #fff;
      border-radius: 20upx;
      padding: 30upx;
      margin-top: 20upx;

      .tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 3.6vw;
        line-height: 32upx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;

        image {
          width: 10upx;
          height: 21upx;
        }
      }

      .show-content {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 40upx;

        .view-category {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .num {
            font-size: 3.6vw;
            font-family: PingFang SC;
            font-weight: 800;
            color: #333333;
          }

          .text {
            font-size: 24upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
          }
        }

        .line {
          width: 1px;
          height: 65upx;
          background-color: #e6e6e6;
        }
      }
    }

    .tool-card {
      background-color: #ffffff;
      width: 100%;
      padding: 0 30upx;
      margin-top: 20upx;
      border-radius: 20upx;

      .tool-item {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100upx;
        align-items: center;
        justify-content: space-between;

        .view-image-left {
          width: 44upx;
        }

        .item-right {
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .view-text {
            margin-left: 22upx;
            font-size: 3.4vw;
            font-family: PingFang SC;
            font-weight: bold;
            color: #1a1a1a;
          }

          .view-image-right {
            width: 10upx;
            height: 21upx;
          }
        }
      }
    }
  }
}
.u-btn--default {
  border-color: #0066ed !important;
  background-color: #2196f3 !important;
}

.uni-view {
  font-size: 12px !important;
  line-height: 1.8;
}

.u-field {
  font-size: 12px !important;
  padding: 10px 14px;
  text-align: left;
  position: relative;
  color: #9e9e9e !important;
  border-bottom: solid 0.2vw #5559690f;
}
.u-border-bottom:after,
.u-border-left:after,
.u-border-right:after,
.u-border-top-bottom:after,
.u-border-top:after,
.u-border:after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 199.8%;
  height: 199.7%;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  border: 0 solid #000 !important;
  border-bottom: solid 0.2vw #5559690f;
  z-index: 2;
}
.mt30 {
  margin-top: 4vw;
}
.radius28 {
  border-radius: 4px;
}
.dark .bgBlue {
  background: #0066ed;
}
.ft14 {
  font-size: 4vw;
  font-weight: bold;
}
</style>
